<template>
<div class="">
  <div class="wrap">
    <div class="titlelist6_10">活动管理 / 伙伴拉新</div>
    <div class="content">
    <div class="sousuojg6_10">
      <el-form
      label-width="80px"
      :model="form"
      class="demo-form-inline">
      <el-form-item label="机构ID">
        <el-input
          v-model="form.officeUid"
          placeholder="请输入机构ID"
        ></el-input>
      </el-form-item>
      <el-form-item label="机构名称">
        <el-input
          v-model="form.officeName"
          placeholder="请输入机构名称"
        ></el-input>
      </el-form-item>
      <!-- <div class="list" style="margin-bottom:20px">
        <div class="naem">机构电话</div>
        <el-input
          style="width:300px"
          v-model="form.phone"
          placeholder="请输入"
        ></el-input>
      </div> -->
      <el-form-item label="活动名称">
        <el-input
          v-model="form.activeName"
          placeholder="请输入活动名称"
        ></el-input>
      </el-form-item>
      <el-form-item label="状态">
        <el-select
          v-model="form.status"
          placeholder="请选择"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="活动时间">
        <el-date-picker
          value-format="yyyy-MM-dd"
          style="width:300px"
          v-model="form.acTime"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker>
      </el-form-item>
      <div class="boxer">
        <el-button type="primary" @click="search"
          >搜索</el-button
        >
        <el-button @click="reset">重置</el-button>
        
      </div>
      </el-form>
    </div>
    <div class="buttons">
      <el-button type="primary" v-if="isAuth('partnerAdd')"  @click="bank">添加活动</el-button>
    </div>

    <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      :header-cell-style="{ background: '#F9FAFC', color: '#222' }"
      stripe
      border
      :row-style="{ height: '0px' }"
      :cell-style="{ padding: '0px' }"
      @selection-change="handleSelectionChange"
      @select="onRowClick"
    >
      <el-table-column type="selection" width="70"></el-table-column>
      <el-table-column
        prop="officeUid"
        label="机构ID"
        min-width="200"
      ></el-table-column>
      <el-table-column
        prop="officeName"
        label="机构名称"
        min-width="200"
      ></el-table-column>
      <!-- <el-table-column
        prop="phone"
        label="机构电话"
        min-width="200"
      ></el-table-column> -->
      <el-table-column
        prop="activeName"
        label="活动名称"
        min-width="190"
      ></el-table-column>
      <el-table-column
        prop="createDate"
        label="创建时间"
        min-width="200"
      ></el-table-column>
      <el-table-column
        label="有效期"
        min-width="190">
         <template slot-scope="scope">
            <div>
              <span>{{ scope.row.startDate }}</span> -- 
              <span>{{ scope.row.endDate }}</span>
            </div>
          </template>
      </el-table-column>
      <el-table-column
        prop="rewardDate"
        label="奖励时间"
        min-width="200"
      ></el-table-column>
      <!-- <el-table-column prop="channelName" label="品牌" width="190"></el-table-column> -->
      <!-- <el-table-column prop="endDate" label="有效期" width="275"></el-table-column> -->
      <el-table-column
        show-overflow-tooltip
        label="状态"
        min-width="100"
      >
        <template slot-scope="scope">
            {{isDuringDate((scope.row))}}
        </template>
      </el-table-column>
      <el-table-column label="操作" min-width="250">
        <template slot-scope="scope">
          <el-button type="text" @click="teamMerchant(scope.row,0)" size="small"
            v-if="isAuth('partnerUpdate')">编辑</el-button
          >
           <el-button v-if="isAuth('partnerDetails')" type="text" @click="teamMerchant(scope.row,1)"  size="small"
            >详情</el-button
          >
          <!-- <span @click="teamMerchant(scope.row)">详情</span> -->
          <el-button
            type="text"
            v-show="scope.row.status == 0 && isAuth('partnerStop')"
            size="small"
            style="color:#F56C6C"
            @click="stop(scope.row)"
            >停用</el-button
          >
          <el-button
            type="text"
            v-show="scope.row.status != 0 && isAuth('partnerStop')"
            size="small"
            @click="stop(scope.row)"
            >启用</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="btn" style="margin-top: 20px">
      <div
        class="filter-container"
        style="float: left; text-align: left; font-size: 13px; color: rgb(31, 165, 243); cursor: pointer;margin-left: 10px;
        margin-top: 10px; width: auto"
      >
        <el-checkbox v-model="checkedAll" @change="all">全选</el-checkbox>
      </div>
      <!-- <div class="exports">批量导出</div> -->
      <el-pagination
        background
        style="text-align: right;"
        class="pagination"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="form.page"
        :page-size="form.number"
        layout="total, sizes, prev, pager, next, jumper"
        :page-sizes="[10, 20, 30, 40, 50]"
        :total="numbers"
      ></el-pagination>
    </div>
    </div>
  </div>
</div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      numbers: 0,
      form: {
        oemUid: localStorage.getItem('uid'),
        officeUid: "", // 机构ID
        officeName: "", //机构名称
        phone: "", //电话
        oType: 0, //机构类型
        activeName: "", //活动名称
        acState: "", //活动状态
        acTime: [], //活动时间
        status: "",
        page: 1,
        number: 20,
        startDate: "", //活动开始时间
        endDate: "" //活动结束时间
      },
      checkedAll: false,
      // 机构类型
      optionsMemberType: [
        {
          value: 0,
          label: "OEM"
        },
        {
          value: 1,
          label: "小oem"
        },
        {
          value: 2,
          label: "贴牌"
        }
      ],
      memberType: "",
      //   机构类型结束‘
      options: [
        {
          value: "",
          label: "全部"
        },
        {
          value: 0,
          label: "正常"
        },
        {
          value: 1,
          label: "停用"
        }
      ],
      value: "",
      value1: "",
      // 日期选择结束
      tableData: [],
      multipleSelection: [],
       //全选
      checkedAll: false,
    };
  },
  created() {
    this.list();
  },
  methods: {
    handleClick(row) {
      console.log(row);
    },
    // 全选
    all() {
      // console.log(this.tableData.length!=this.multipleSelection.length)
      if (this.tableData.length != this.multipleSelection.length) {
        this.tableData.forEach(row => {
          // this.$refs.multipleTable.clearSelection();
          // this.multipleSelection=[]
          this.$refs.multipleTable.toggleRowSelection(row, true);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
      // console.log(this.multipleSelection)
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      if (this.tableData.length != this.multipleSelection.length) {
        this.checkedAll=false
      }else{
        this.checkedAll=true
      }
       console.log(this.multipleSelection)
    },
    isDuringDate(beginDateStr) {
      var curDate = new Date(),
          beginDate = new Date(beginDateStr.startDate),
          endDate = new Date(beginDateStr.endDate);
      if (curDate >= beginDate && curDate <= endDate) {
          return "进行中";
      }else if(curDate<beginDate){
        return "未开始"
      }else if(curDate>endDate){
        return "已结束";
      }
    },
    // 停用
    stop(num) {
      console.log(num);
      let uid = num.activeUid;
      let status = num.status;
      if (status == 1) {
        status = 0;
      } else {
        status = 1;
      }
      axios
        .post("/api/active/changeActiveStatus", { uid: uid, status: status })
        .then(res => {
          this.list()
        })
    },
    list() {
      let _this = this;
      console.log(_this.form.acTime[0] ? _this.form.acTime[0] : "");
      _this.form.startDate = _this.form.acTime[0] ? _this.form.acTime[0] : "";
      _this.form.endDate = _this.form.acTime[1] ? _this.form.acTime[1] : "";

      _this
        .axios({
          //axios请求
          method: "post",
          url: "/api/active/promotionNewPartnerList",
          data: _this.form
        })
        .then(function(d) {
          console.log(d);
          _this.tableData = d.data.data;
          console.log(_this.tableData.length!=0);
          if(_this.tableData.length!=0){
              for (let i = 0; i < _this.tableData.length; i++) {
              //  
              // console.log(_this.tableData[i].status==0)
              if (_this.tableData[i].status === "0") {
                _this.tableData[i].statu = "正常";
              } else if (_this.tableData[i].status === "1") {
                _this.tableData[i].statu = "停用";
              }
            }
          }
          
          console.log(_this.tableData);

          _this.numbers = d.data.total;
        })
        .catch();
    },
    // 分页
    handleSizeChange(val) {
      let that = this;
      that.form.number = val;
      that.form.page = 1;
      that.list();
    },
    // 分页
    handleCurrentChange(val) {
      let that = this;
      that.form.page = val;
      that.list();
    },
    // qiehuan(val) {
    //   this.form.page = val;
    // },
    onRowClick(val) {
      console.log("选中打印");
      console.log(val);
    },
    // 搜索
    search() {
      let that = this;
      that.form.page = 1;
      that.list();
    },
    // 重置
    reset() {
      this.form.officeUid = ""; //机构id
      this.form.officeName = ""; //机构名称
      this.form.phone = ""; //手机号
      this.form.oType = ""; //机构类型
      this.form.activeName = ""; //活动名称
      this.form.startDate = ""; //活动开始时间
      this.form.endDate = ""; //活动结束时间
      this.form.status = ""; //活动状态：0正常 1停用
      this.form.acTime = [];
    },
    // 添加活动
    bank() {
      this.$router.push({
        path: "frindsestablish",
        name: "frindsestablish",
        query: { type: "3" ,user:"0"}
      });
    },
    teamMerchant(val,num) {
      console.log(num)
      // if(num==0){
        this.$router.push({
          path: "frindsestablish",
          name: "frindsestablish",
          query: { activeUid: val.activeUid,
            user:num,
            type:num
          }
        });
      // }
      
    }
  }
};
</script>

<style scoped>
.con{
  position: relative;
}
.contbox6_10 {
  width: 100%;
  /* margin-left: 2%; */
  /*  height: 87.5vh; */
  overflow-x: auto;
  box-sizing: border-box;
  float: left;
}
.searchTitle {
  display: flex;
  flex-wrap: wrap;
  background: #f9fafc;
  padding-top: 20px;
  padding-bottom: 20px;
  padding-left: 20px;
  box-sizing: border-box;
  padding-top: 20px;
}
.list {
  display: flex;
  align-items: center;
  width: 450px;
  /* width: 33.3333%; */
}
.list > div:first-of-type {
  width: 90px;
  /* display: flex; */
  /* align-items: center; */
  /* justify-content: right; */
  margin-right: 15px;
  text-align: right;
}
.exports {
  color: #409eff;
  margin-left: 20px;
}
.btn {
  align-items: center;
}
.info {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: 50px;
}
.line {
  display: flex;
  justify-content: space-between;
  margin-top: 30px;
  border-bottom: 1px solid #ebeef5;
}
.topTitle {
  font-size: 16px;
  color: #2f2c29;
  margin-top: 40px;
  margin-bottom: 30px;
  /* text-indent: 20px; */
}
.textTitle {
  font-size: 18px;
  color: #2f2c29;
  border-bottom: 2px solid #606266;
}
</style>
